<template>
  <div>
    <div class="all-orders">
      <div class="head" @click="orderFn">
        <p class="title">全部订单</p>
        <span class="rightArrow"></span>
      </div>
      <!-- 所有订单的每一项 -->
      <allorderitem>
        <template #icon1>
          <img
            src="../../../static/images/mine/waitpay-1x.png"
            class="order-icon1 order-icon"
            @click="paymentFn"
          />
        </template>
        <template #icon2>
          <img
            src="../../../static/images/mine/wait-send-1x.png"
            class="order-icon2 order-icon"
            @click="deliverFn"
          />
        </template>
        <template #icon3>
          <img
            src="../../../static/images/mine/wait-recive-1x.png"
            class="order-icon3 order-icon"
            @click="takeFn"
          />
        </template>
        <template #icon4>
          <img
            src="../../../static/images/mine/finish-1x.png"
            class="order-icon4 order-icon"
            @click="finishFn"
          />
        </template>
      </allorderitem>
    </div>
  </div>
</template>
<script>
import allorderitem from "./allordersitem";
// 轻提示组件
import { Toast } from 'vant';
export default {
  components: {
    allorderitem,
  },
  methods: {
    orderFn(){
      if(localStorage.getItem("telPhone")){
          this.$router.push({path:"orderList"}).catch(err=>{});
      }else{
          Toast('请先登录');
          this.$router.push({path:"login"}).catch(err=>{});
      }
    },
    // 编程式路由
    paymentFn(){
        if(localStorage.getItem("telPhone")){
            this.$router.push({name:'awaitPayment', params:{index:1}}).catch(err=>{});
        }else{
            Toast('请先登录');
            this.$router.push({path:"login"}).catch(err=>{});
            console.log("登录页");
        }
    },
    deliverFn(){
        if(localStorage.getItem("telPhone")){
            this.$router.push({name:'awaitDeliver', params:{index:2}}).catch(err=>{});
        }else{
            Toast('请先登录');
            this.$router.push({path:"login"}).catch(err=>{});
            console.log("登录页");
        }
    },
    takeFn(){
        if(localStorage.getItem("telPhone")){
            this.$router.push({name:'awaitReceiving', params:{index:3}}).catch(err=>{});
        }else{
            Toast('请先登录');
            this.$router.push({path:"login"}).catch(err=>{});
            console.log("登录页");
        }
    },
    finishFn(){
        if(localStorage.getItem("telPhone")){
            this.$router.push({name:'orderFinish', params:{index:4}}).catch(err=>{});
        }else{
            Toast('请先登录');
            this.$router.push({path:"login"}).catch(err=>{});
            console.log("登录页");
        }
    },
  },
};
</script>
<style lang="less" scoped>
.all-orders {
  width: 710px;
  height: 254px;
  background: #fff;
  border-radius: 10px;
  padding-top: 26px;
  margin: 185px 0 17px 25px;
  .head {
    position: relative;
    height: 45px;
    line-height: 45px;
    .title {
      width: 150px;
      margin-left: 23px;
      font-size: 36px;
      font-weight: bold;
      color: #000000;
      line-height: 30px;
      opacity: 0.9;
    }
  }
  .rightArrow {
    position: absolute;
    width: 17px;
    height: 29px;
    background: url(../../../static/images/mine/rightArrow-1x.png) no-repeat;
    background-size: contain;
    top: 1px;
    right: 30px;
  }
}
/*// 所有订单的子项*/
/*.item {*/
/*  position: relative;*/
/*  width: 25%;*/
/*  height: 90px;*/
/*  text-align: center;*/
/*  .order-icon {*/
/*    position: absolute;*/
/*  }*/
/*  .order-icon1 {*/
/*    width: 64px;*/
/*    height: 49px;*/
/*    left: 51px;*/
/*  }*/
/*  .order-icon2 {*/
/*    width: 60px;*/
/*    height: 51px;*/
/*    left: 51px;*/
/*  }*/
/*  .order-icon3 {*/
/*    width: 80px;*/
/*    height: 56px;*/
/*    left: 51px;*/
/*  }*/
/*  .order-icon4 {*/
/*    width: 62px;*/
/*    height: 52px;*/
/*    left: 51px;*/
/*  }*/
/*  .text-desc {*/
/*    margin-top: 60px;*/
/*    font-size: 28px;*/
/*  }*/
/*}*/
</style>
